<!DOCTYPE html>
<html>

<head>
	<title>JRDS</title>
<link href="dojo/resources/dojo.css" rel="stylesheet" type="text/css" />
<link href="dijit/themes/nihilo/nihilo.css" rel="stylesheet" type="text/css" />
<link href="lib/jrds.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var dojoConfig = { parseOnLoad:false, isDebug: false, locale:'en-us', async: true }
</script>
<script type="text/javascript" src="dojo/dojo.js" ></script>
<script type="text/javascript" src="lib/jrds.js"></script>
<script type="text/javascript">

//non sens code, just a work around over complicated AMD migration
amdVector = [
 "dojo",
 "dijit",
 "dojox",
 "dojo/cookie",
 "dojo/parser",
 "dojo/data/ItemFileReadStore",
 "dojox/widget/Standby",
 "dijit/layout/BorderContainer",
 "dijit/layout/ContentPane",
 "dijit/TitlePane",
 "jrds/HostForm",
 "jrds/Autoperiod",
 "jrds/TimeTextBox",
 "jrds/DateTextBox",
 "jrds/jrdsTree",
 "jrds/DiscoverHostForm",
 "jrds/PeriodNavigation",
 "jrds/StateURLButton",
 "jrds/ToogleSort",
 "jrds/ReloadButton",
 "jrds/RenderForm",
 "jrds/RootButton",
 "jrds/AutoscaleReset",
 "jrds/MinMaxTextBox",
 "jrds/Tabs",
 "jrds/TabContent",
 "jrds/StatusButton",
 "dojo/domReady!"
]

var dojo, dijit, dojox;
var mainPane;

require(amdVector, function(local_dojo, local_dijit, local_dojox) {
	dojo = local_dojo;
	dijit = local_dijit;
	dojox = local_dojox;
	initIndex();
}
);

</script>

</head>

<body class="nihilo">
	<div id='tabs' data-dojo-type="jrds/Tabs" style="width: 100%; height: 100%;" region="center">
  		<div data-dojo-type="dijit/layout/ContentPane" title="Administration" id="adminTab" selected="false">
			<div id="statusPane" data-dojo-type="dijit/TitlePane" title="Status">
				<div id="status" >
				</div>
				<button id="refreshButton" data-dojo-type="jrds/StatusButton"> Refresh </button>
			</div>
			<div data-dojo-type="dijit/TitlePane" title="Command">
				<button data-dojo-type="jrds.ReloadButton" type="button"> Reload </button>
			</div>
			<div data-dojo-type="dijit/TitlePane" title="Discover an host">
				<form action=""  id="discoverForm" method="" data-dojo-type="jrds/DiscoverHostForm">
					<button type="submit" id="discoverHost" data-dojo-type="dijit/form/Button" >Discover</button>
					<button type="submit" id="discoverClear" data-dojo-type="dijit/form/Button" >Clear Host</button>
					<div>
						<label for="discoverHostName">Host name</label>
						<input id="discoverHostName" name="discoverHostName" trim="true" required="true" data-dojo-type="dijit/form/ValidationTextBox" />
					</div>
					<div id="discoverAutoBlock">
					</div>
				</form>
				<pre id="discoverResponse"></pre>
			</div>
		</div> <!-- adminTab -->
	</div>
  <!--  The content of tab panes, it can be any where, it will be destroyed -->
   <div data-dojo-type="dijit/layout/ContentPane" id='mainTab' title="Main tree" selected="true">
		<div id="mainPane" data-dojo-type="dijit/layout/BorderContainer" design="sidebar" gutters="false" >
			<div id="treePane" data-dojo-type="dijit/layout/ContentPane" region="leading" splitter="true" >
				<form id="hostForm" data-dojo-type="jrds/HostForm">
					<button id="toroot" data-dojo-type="jrds/RootButton" data-dojo-props="iconClass: 'rootButtonIcon', showLabel: false" type="button">go root</button>
      				<label for="host">Only host</label>
      				<input id="host" type="text" name="host" size="24" data-dojo-type="dijit/form/TextBox" trim="true" required="true" />
        			<button type="submit" data-dojo-type="dijit/form/Button">Search</button>
				</form>
				<img id="foldButton" class="dijitTreeIcon dijitFolderClosed" alt="" src="dojo/resources/blank.gif" onClick="doUnfold();" />
			</div> <!-- treePane -->
			<div id="centerPane" data-dojo-type="dijit/layout/ContentPane" region="center">
				<div data-dojo-type="dijit/layout/ContentPane" id="paramsPane" >
					<form id="dateForm" name="dateForm" data-dojo-type="jrds/RenderForm" >
						<div data-dojo-type="dijit/layout/ContentPane" class="formblock" >
							<span class="linelabel">Time scale</span>
       						<select id="autoperiod" name="autoperiod" data-dojo-type="jrds/Autoperiod">
								<option value="0" id="period.0">Manual</option>
								<option value="1" id="period.1">Last Hour</option>
								<option value="2" id="period.2">Last 2 Hours</option>
								<option value="3" id="period.3">Last 3 Hours</option>
								<option value="4" id="period.4">Last 4 Hours</option>
								<option value="5" id="period.5">Last 6 Hours</option>
								<option value="6" id="period.6">Last 12 Hours</option>
								<option value="7" id="period.7">Last Day</option>
								<option value="8" id="period.8">Last 2 Days</option>
								<option value="9" id="period.9">Last Week</option>
								<option value="10" id="period.10">Last 2 Weeks</option>
								<option value="11" id="period.11">Last Month</option>
								<option value="12" id="period.12">Last 2 Months</option>
								<option value="13" id="period.13">Last 3 Months</option>
								<option value="14" id="period.14">Last 4 Months</option>
								<option value="15" id="period.15">Last 6 Months</option>
								<option value="16" id="period.16">Last Year</option>
								<option value="17" id="period.17">Last 2 Years</option>
       						</select>
          					<label class="paramslabel" for="begin">From</label>
          					<button id="periodprevious" type="button" data-dojo-type="jrds/PeriodNavigation" data-dojo-props="iconClass: 'previousPeriodNavigation'">previous</button>
          					<input type="text" name="begin" id="begin" data-dojo-type="jrds/DateTextBox" data-dojo-props="resetHour: '00:00', timeBoxName: 'beginh'" />
          					<input type="text" name="beginh" id="beginh" data-dojo-type="jrds/TimeTextBox" data-dojo-props="queryId: 'begin'" />
          					<label class="paramslabel" for="end">To</label>
          					<input type="text" name="end" id="end" data-dojo-type="jrds/DateTextBox" data-dojo-props="resetHour: '23:59', timeBoxName: 'endh'" />
          					<input type="text" name="endh" id="endh"  data-dojo-type="jrds/TimeTextBox" data-dojo-props="queryId: 'end'"/>
          					<button id="periodnext" type="button" data-dojo-type="jrds/PeriodNavigation" data-dojo-props="iconClass: 'nextPeriodNavigation'">next</button>
        				</div>
        				<div data-dojo-type="dijit/layout/ContentPane" class="formblock" >
        					<span class="linelabel">Vertical scale</span>
          					<button id="autoscale" data-dojo-type="jrds/AutoscaleReset"> Auto </button>
          					<label class="paramslabel" for="min">Min</label>
          					<input id="min" type="text" name="min" class="field"
    			 					data-dojo-type="jrds/MinMaxTextBox"
    			 					size="14" />
          					<label class="paramslabel" for="max">Max</label>
          					<input  id="max" type="text" name="max" class="field"
    			 					data-dojo-type="jrds/MinMaxTextBox"
    			 					size="14" />
        				</div>
				        <div data-dojo-type="dijit/layout/ContentPane" class="formblock" >
				        	<span class="linelabel">Sort</span>
        					<button id="sorted" data-dojo-type="jrds/ToogleSort"> Sorted graphs </button>
        				</div>
				        <button type="submit" data-dojo-type="dijit/form/Button" >Refresh</button>
				        <button data-dojo-type="jrds/StateURLButton" >State URL</button>
					</form>
				</div> <!-- "paramsPane" -->
				<div  data-dojo-type="dijit/layout/ContentPane" id="graphPane">
					<div class='graphblock'>
					</div>
				</div> <!-- graphPane -->
			</div> <!-- centerPane -->
		</div>
	</div> <!-- mainTab -->

</body>
</html>
